<template>
    <div class="coo-list-wrap filter-form">
        <div>
            <div class="condition">
                <el-button type="primary">设置告警阈值</el-button>
            </div>
            <div class="panel flex-column ">
                <el-form :inline="true" class="filter-form" style="margin-bottom:20px;">
                    <div class="form-content">
                        <el-form-item label="告警级别">
                            <el-select v-model="queryParams.publication_type" placeholder="请选择告警级别" clearable>
                                <el-option v-for="(val, key) in typeList" :key="key" :label="val" :value="key" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择时间">
                            <el-date-picker
                                v-model="queryParams.publication_date_start"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="开始时间"
                            />
                            <el-date-picker
                                v-model="queryParams.publication_date_end"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="结束时间"
                            />
                        </el-form-item>
                    </div>
                    <div>
                        <el-button @click="resetFilterForm()">重置</el-button>
                        <el-button type="primary" @click="getList(1)">查询</el-button>
                    </div>
                </el-form>
            </div>
            <div class="table-container">
                <el-table v-loading="loading" :border="true" :data="tableData"  height="630px" :header-cell-style="{background:'#D8E8FF'}">
                    <el-table-column type="index" label="序号" width="50" align="center" />
                    <el-table-column prop="name" label="告警编码"  width="240" align="center" min-width="200" />
                    <el-table-column prop="time" label="告警时间" width="220" align="center" />
                    <el-table-column prop="level" label="告警级别" min-width="220" align="center">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.level==='警告级'" type="warning" size="small">{{scope.row.level}}</el-tag>
                            <el-tag v-if="scope.row.level==='错误级'" type="danger" size="small">{{scope.row.level}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="告警方式" width="220" align="center" />
                    <el-table-column prop="status" label="处理状态" min-width="220" align="center">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status==='未完成'" type="danger" size="small">{{scope.row.status}}</el-tag>
                            <el-tag v-if="scope.row.status==='完成'" type="success" size="small">{{scope.row.status}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="user" label="处理员" width="220" align="center" />
                    <el-table-column prop="note" label="备注" width="220" align="center" />
                </el-table>
                <div class="pagination-container">
                    <pagination-control
                        :paging-params="pagingParams"
                        @onCurrentPage="handleCurrentChange"
                        @onCurrentSize="handleSizeChange"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import PaginationControl from "@/layout/paginationControl.vue"
  
export default {
    components: {
        PaginationControl,
    },
    data: function() {
        return {
            pagingParams: {
                page: 1,
                size: 20,
                total: 5
            },
            queryParams: {
                db_type: null,
            },
            typeList: {
                10: "Oracle",
                20: "MySQL",
                30: "redis",
            },
            backup_db: 3,
            dbList: {
                1: "stback01",
                2: "pgstb02",
                3: "pg12stb01",
            },
            tableData: [
                {
                    "name": "ulockpqihme",
                    "time": "2024-10-20 10:00:24",
                    "level": "警告级",
                    "status": "未完成",
                    "type": "邮件",
                    "user": "",
                },
                {
                    "name": "qhjejqxusa",
                    "time": "2024-10-20 11:00:24",
                    "level": "错误级",
                    "status": "未完成",
                    "type": "短信",
                    "user": "",
                },
                {
                    "name": "nlqkugreha",
                    "time": "2024-10-20 12:00:24",
                    "level": "错误级",
                    "status": "未完成",
                    "type": "短信",
                    "user": "",
                },
                {
                    "name": "fqrhreha",
                    "time": "2024-10-20 13:00:24",
                    "level": "警告级",
                    "status": "完成",
                    "type": "短信",
                    "user": "root",
                },
                {
                    "name": "aorrkuaeza",
                    "time": "2024-10-20 14:00:24",
                    "level": "警告级",
                    "status": "完成",
                    "type": "短信",
                    "user": "root",
                },
            ]
        }
    },
    mounted() {
        
    },
    methods: {
        
    },
}
</script>

<style lang="less" scoped>
@import "~@/assets/css/scrollbar.css";
.coo-list-wrap {
	height: 100%;
	width: 100%;
    // position: relative;
    background-color: #fff;
    .title {
        color: #333333;
        font-size: 18px;
        font-weight: 600;
        line-height: 32px;
        margin-right: 20px;
    }
    .table-container {
        padding: 0px 30px;
        .el-table {
            font-size: 12px !important;
        }
    }
    .condition {
        padding: 30px;
        display: flex;
    }
    .filter-form {
        padding: 0 30px;
		display: flex;
		align-items: center;
		.form-content {
			flex: 1;
			margin-right: 20px;
			margin-top: -6px;
			margin-bottom: -6px;
		}
	}
    ::v-deep {
		.condition {
			.el-form-item {
				margin-bottom: 0;
				padding-top: 6px;
				padding-bottom: 6px;
                height: 32px;
			}
			.el-form-item__label {
				font-size: 12px;
				font-weight: normal;
			}
            .el-input__icon {
                line-height: 32px;
            }
            .el-input--suffix .el-input__inner {
                height: 32px;
            }
        }
	}
}
.el-button {
    border-radius: 5px;
    font-size: 12px;
    padding: 9px 15px;
    &.el-button--primary.is-plain{
        color: #409EFF;
        background: #E9F2FF;
        border: 1px solid #C4E1FF;
    }
    &.el-button--warning{
        background: #ec821f;
    }
}
//表格内容颜色
::v-deep .el-table__body tbody tr:nth-child(odd) {
    background-color: #FFFFFF;
}
::v-deep .el-table__body tbody tr:nth-child(even) td {
    background-color: #F1F8FF;
}
//表头文字样式
::v-deep .el-table__header-wrapper {
    thead {
        th{
            div{
            // font-weight: 700;
            // font-size: 20px;
            color: #333333
            }
        }
    }
}
</style>